<template>
  <PageWrapper>
    <div class="page-box">
      <div class="__header">
        <a-space :size="20">
          <a-radio-group v-model:value="dateType" button-style="solid">
            <a-radio-button value="day">日</a-radio-button>
            <a-radio-button value="month">月</a-radio-button>
            <a-radio-button value="year">年</a-radio-button>
          </a-radio-group>
          <a-range-picker  :getPopupContainer="(triggerNode) => triggerNode.parentNode" :presets="rangePresets[dateType]" v-model:value="date" :picker="picker" />
          <a-space :size="10">
            <a-button type="primary" @click="query">查询</a-button>
            <a-button @click="reset">重置</a-button>
          </a-space>
        </a-space>
      </div>
      <div class="content-box">
        <div class="block-box">
          <div class="block-header">气体安全报警处理统计</div>
          <div class="block-main" id="gasDeal"></div>
        </div>
        <div class="block-box">
          <div class="block-header">消防安全报警处理统计</div>
          <div class="block-main" id="xfDeal"></div>
        </div>
        <div class="block-box">
          <div class="block-header">气体安全报警类别统计</div>
          <div class="block-main" id="gasType"></div>
        </div>
        <div class="block-box">
          <div class="block-header">消防安全报警类别统计</div>
          <div class="block-main" id="xfType"></div>
        </div>
      </div>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive, watch, computed } from 'vue';
import { PageWrapper } from '@/components/Page';
import * as Api from '@/api/securityManagement';
import dayjs from 'dayjs';
import useBar from './useBar';
import usePie from './usePie';

let dateType = ref('day');
let date = ref<any>([dayjs().add(-14, 'd'), dayjs()]);
const data = reactive({
  gasDeal: null,
  xfDeal: null,
  gasType: null,
  xfType: null
})
const picker = computed(() => {
  if (dateType.value === 'month') {
    return 'month'
  }
  if (dateType.value === 'year') {
    return 'year'
  }
  return '';
});
const rangePresets = reactive({
  day: [{ label: '近14天', value: [dayjs().add(-14, 'd'), dayjs()] }],
  month: [{ label: '近6个月', value: [dayjs().add(-6, 'month'), dayjs()] }],
  year: [{ label: '近5年', value: [dayjs().add(-5, 'year'), dayjs()] }],
});
watch(() => dateType.value, () => {
  if (dateType.value === 'day') {
    date.value = [dayjs().add(-14, 'd'), dayjs()]
  }
  if (dateType.value === 'month') {
    date.value = [dayjs().add(-6, 'month'), dayjs()]
  }
  if (dateType.value === 'year') {
    date.value = [dayjs().add(-5, 'year'), dayjs()]
  }
})
const reset = () => {
  dateType.value = 'day';
  date.value = [];
}
const getDate = (type, date) => {
  if (!date) {
    return {
      startDate: '',
      endDate: ''
    }
  }
  if (type == 'month') {
    return {
      startDate: dayjs(date[0]).format('YYYY-MM'),
      endDate: dayjs(date[1]).format('YYYY-MM')
    }
  }
  if (type == 'year') {
    return {
      startDate: dayjs(date[0]).format('YYYY'),
      endDate: dayjs(date[1]).format('YYYY')
    }
  }
  return {
    startDate: dayjs(date[0]).format('YYYY-MM-DD'),
    endDate: dayjs(date[1]).format('YYYY-MM-DD')
  }
}
const getDealCount = async (type) => {
  const _date = getDate(dateType.value, date.value)
  const res = await Api.getDealCount({
    startDate: _date.startDate,
    endDate: _date.endDate,
    modelTypeId: type,
    queryType: dateType.value
  });
  if (res) {
    if (type == '1') {
      data.gasDeal = res;
    } else if (type == '2') {
      data.xfDeal = res;
    }
  }
};
const getTypeCount = async (type) => {
  const _date = getDate(dateType.value, date.value)
  const res = await Api.getTypeCount({
    startDate: _date.startDate,
    endDate: _date.endDate,
    modelTypeId: type,
    queryType: dateType.value
  });
  if (res) {
    if (type == '1') {
      data.gasType = res;
    } else if (type == '2') {
      data.xfType = res;
    }
  }
};
usePie({
  id: 'gasDeal',
  data: data,
  key: 'gasDeal'
});
usePie({
  id: 'xfDeal',
  data: data,
  key: 'xfDeal'
});
useBar({
  id: 'gasType',
  data: data,
  key: 'gasType'
});
useBar({
  id: 'xfType',
  data: data,
  key: 'xfType'
});
const query = async () => {
  // type 气体1  消防2
  getDealCount(1);
  getDealCount(2);
  getTypeCount(1);
  getTypeCount(2);
}
onMounted(() => {
  query();
})
</script>
<style lang="less" scoped>
.page-box {
  height: calc(100vh - 115px);
  overflow-y: auto;

  .__header {}

  .content-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: calc(100% - 62px);
    min-height: 800px;
    margin-top: 20px;

    .block-box {
      padding-right: 20px;
      padding-bottom: 10px;
    }

    .block-header {
      position: relative;
      margin: 10px 0;
      padding-left: 13px;
      color: rgb(0 0 0 / 85%);
      font-size: 14px;
      font-weight: 600;
      line-height: 16px;

      &::before {
        content: '';
        position: absolute;
        top: 2px;
        left: 0;
        width: 3px;
        height: 14px;
        border-radius: 3px;
        background: #0067cc;
      }
    }

    .block-main {
      height: calc(100% - 36px);
      background-color: #fff;
    }
  }
}
</style>
